import React,{Component,PropTypes} from 'react';
import {redirect,backward} from 'lib/utils';
import Baselist from 'components/Baselist';
import Crumb from 'components/Crumb';
import API from 'lib/api';
import {Card,Form, Select, Input, InputNumber, Icon, Table, Modal, Button, DatePicker} from 'antd';
import './style.less';

import moment from 'moment';
const FormItem = Form.Item;


const columns = [{
    title: 'id',
    dataIndex: 'id',
    render: text => <a href="#">{text}</a>,
}, {
    title: '商品名称',
    dataIndex: 'name',
}];

// 待选商品数据
const data = [
    {
        key: '1',
        id: 224,
        name: "测试商品一",
        retailPrice:"1.20",
        specification:"白色-5.0大猴子屏幕"
    }, {
        key: '2',
        id: 225,
        name: "测试商品二",
        retailPrice:"1.20",
        specification:"白色-5.0大猴子屏幕"
    }
];



// 日期区间
function range(start, end) {
    const result = [];
    for (let i = start; i < end; i++) {
        result.push(i);
    }
    return result;
}

// 禁用日期
function disabledDate(current) {
    // Can not select days before today and today
    return current && current.valueOf() < Date.now()-8640000;
};


class SnapUp extends Component{
    constructor(props){
        super(props);

        this.state={
            visible: false,
            goodsList:[],
            crumb:[
                {href:"/",title:"首页"},
                {href:"/",title:"活动列表"},
                {href:"/",title:"添加活动"}
            ]
        }
    };



    componentDidMount(){

        if(this.props.routeParams.id){
            // API.fetch("",{id:id},resp=>{
            //     const initData={date:"2017-12-10 10:00:00"};
            //
            //     this.props.form.setFieldsValue(initData);
            //     this.setState({
            //
            //         goodsList:data
            //     });
            // })
        }
    };


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    }



    /*       模态框         */
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    }


    render(){
        const { getFieldDecorator } = this.props.form;
        const {goodsList} = this.state;


        /*       商品选购         */
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    goodsList:selectedRows
                })
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
            }),
        };



        return(
            <Baselist>
                <Crumb crumb={this.state.crumb}/>
                <Card title="添加抢购活动信息" noHovering={true} className="snap-up_wrap">

                    <Form onSubmit={this.handleSubmit} >

                        <FormItem
                            label="开始时间"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 16 }}
                        >
                            {getFieldDecorator('date', {
                                rules: [{ required: true, message: '请选择开始时间' }],
                            })(
                                <DatePicker
                                    format="YYYY-MM-DD HH:mm:ss"
                                    disabledDate={disabledDate}
                                    showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                                />
                            )}
                        </FormItem>

                        <FormItem
                            label="添加商品"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 16 }}
                        >
                            {getFieldDecorator('level', {
                                initialValue:"0",
                                rules: [{ required: false, message: '' }],
                            })(
                                <div className="add-op" onClick={this.showModal}>
                                    <Icon type="plus" />
                                    点击添加商品
                                </div>
                            )}
                        </FormItem>

                        {
                            goodsList.length > 0?
                                <FormItem >
                                    <div className="ant-col-4 ant-form-item-label"></div>
                                    <div className="ant-col-16 ant-form-item-control-wrapper">
                                        <div className="thead tr">
                                            <span className="tr-items">商品名称</span>
                                            <span className="tr-items">商品销售价</span>
                                            <span className="tr-items">商品规格</span>
                                            <span className="tr-items">商品抢购价</span>
                                            <span className="tr-items">抢购数量</span>
                                        </div>
                                        <div className="tbody">
                                            {
                                                goodsList.map(v=>(
                                                    <div className="tr" key={v.key}>
                                                        <span className="tr-items">{v.name}</span>
                                                        <span className="tr-items">{v.retailPrice}</span>
                                                        <span className="tr-items">{v.specification}</span>

                                                        <FormItem className="tr-items">
                                                            {getFieldDecorator(`table${v.key}`, {
                                                                rules: [{ required: true, message: ' ' }],
                                                            })(
                                                                <InputNumber  style={{width:"90%"}} precision={2}/>
                                                            )}

                                                        </FormItem>


                                                        <FormItem className="tr-items">
                                                            {getFieldDecorator(`table${v.key}s`, {
                                                                rules: [{ required: true, message: ' ' }],
                                                            })(
                                                                <InputNumber style={{width:"90%"}} precision={0} />
                                                            )}
                                                        </FormItem>
                                                    </div>
                                                ))
                                            }

                                        </div>
                                    </div>

                                </FormItem>:null
                        }





                        <FormItem
                            wrapperCol={{ span: 8, offset: 4 }}
                        >
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </FormItem>

                    </Form>
                </Card>
                <Modal
                    title="选择要添加的商品"
                    width="50%"
                    style={{fontSize:"14px"}}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data}
                           pagination={{defaultPageSize:8}}
                    />
                </Modal>
            </Baselist>

        )
    }
};

export default Form.create()(SnapUp);